<template>
  <div>
    <!-- 标题榜 -->
    <div class="btb"></div>
    <!-- 分类 排行 推荐 -->
    <van-grid>
      <van-grid-item icon="photo-o" text="推荐" />
      <van-grid-item icon="photo-o" text="排行" />
      <van-grid-item icon="photo-o" text="分类" />
      <van-grid-item>
        <div>
          <van-icon name="like-o" />
          <span>我的喜欢</span>
        </div>
      </van-grid-item>
    </van-grid>
    <!-- 列表 -->
    <div
      class="liebiao"
      v-for="(item, index) in gequliebiao"
      :key="index"
      @click="dianji(item)"
    >
      <!-- 系统播放器 -->
      <audio
        id="myAudio"
        v-show="false"
        controls
        :src="CurrentPlay.gedi"
      ></audio>
      <!-- 头像 -->
      <van-image class="sndjak" :src="item.img" />
      <!-- 介绍 -->
      <div class="jiehsoa">
        <div>
          <!-- 名称 -->
          <span> {{ item.song }} </span>
          <!-- 歌手 -->
          <span> {{ item.singer }} </span>
        </div>
        <div>
          <!-- 信息 -->
          <span>{{ item.message }}</span>
          <!-- 标签 -->
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>

    <!-- 播放器 -->
    <div class="bofangqi">
      <div class="bofangqisdadas">
        <div class="sdawdsa">
          <!-- 歌曲图片 -->
          <div class="touxiang">
            <van-image round :src="CurrentPlay.img" class="imgggg" />
          </div>
          <!-- 歌曲名字 -->
          <div>
            <span> {{ CurrentPlay.song }} </span>
          </div>
        </div>
        <div class="hkjasdhjas">
          <van-icon name="arrow-left" />
          <van-icon :name="bofnag" @click="dianjibf" />
          <van-icon name="arrow" />
          <div class="yliangasa">
            <van-icon name="bullhorn-o" @click="yltjshow = !yltjshow" />
            <div class="yliang">
              <input
                v-show="yltjshow"
                type="range"
                class="slider"
                min="0"
                max="1"
                step="0.01"
                v-model="value"
              />
            </div>
          </div>
          <van-icon name="other-pay" />
        </div>
      </div>

      <!-- 进度条 -->
      <div class="jdt">
        <van-progress
          :percentage="yyjdt"
          pivot-text=""
          pivot-color="#7232dd"
          color="linear-gradient(to right, #be99ff, #7232dd)"
        />
      </div>
    </div>
    <!-- 把底部看不见的地方占住 -->
    <div style="height: 120px" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "BaiLing",
  data() {
    return {
      // 所有歌曲
      gequliebiao: [],
      //当前播放的歌曲
      CurrentPlay: [],
      bofnag: "play-circle-o",
      value: 0,
      // 是否显示音量调节
      yltjshow: false,
      //音乐进度条
      yyjdt: 100,
      // 音乐
      mu: [
        {
          name: "Take My Love",
          gedi: require("@/../public/221小伙伴 - 遥远的你 (正式版).mp3"),
        },
        {
          name: "我又想你了",
          gedi: require("@/../public/Adele - Make You Feel My Love.mp3"),
        },
        {
          name: "不想睡",
          gedi: require("@/../public/Alan Walker _ K-391 _ Sofia Carson _ CORSAK - Different World.mp3"),
        },
        { name: "倒数", gedi: require("@/../public/G.E.M. 邓紫棋 - 倒数.mp3") },
        {
          name: "一次就好",
          gedi: require("@/../public/FMG - 一次就好（夏洛特烦恼电影插曲）.mp3"),
        },
      ],
    };
  },
  methods: {
    // 播放音乐
    bfyy() {
      this.$nextTick(function () {
        const audio = document.getElementById("myAudio");
        audio
          .play()
          .then(() => {
            console.log("音频播放已开始");
            this.bofnag = "pause-circle-o";
            console.log("audio.volume:", audio.volume);
            this.value = audio.volume;
            // const ass = setInterval(function () {
            //   const progress = (audio.currentTime / audio.duration) * 100;
            //   this.yyjdt = progress;
            //   console.log(this.yyjdt);
            // }, 1000);
          })
          .catch((error) => {
            console.log(`音频播放失败: ${error}`);
          });
      });
    },
    // 暂停音乐
    ztyy() {
      this.$nextTick(function () {
        const audio = document.getElementById("myAudio");
        audio.pause();
        this.bofnag = "play-circle-o";
      });
    },
    //
    dianjibf() {
      if (this.bofnag == "play-circle-o") {
        this.bofnag = "pause-circle-o";
        this.bfyy();
      } else {
        this.bofnag = "play-circle-o";
        this.ztyy();
      }
    },
    // 点击列表播放音乐
    dianji(item) {
      console.log("item:", item);
      this.CurrentPlay = item;
      this.mu.forEach((a) => {
        if (item.song == a.name) {
          this.CurrentPlay.gedi = a.gedi;
        }
      });
      this.bfyy();
    },
  },
  watch: {
    value: function () {
      const audio = document.getElementById("myAudio");
      audio.volume = this.value;
    },
  },
  mounted() {
    axios.get("http://localhost:8080/music/musicall").then((res) => {
      this.gequliebiao = res.data.data;
      this.CurrentPlay = this.gequliebiao[0];
      this.CurrentPlay.gedi = this.mu[0].gedi;
      // console.log(this.gequliebiao);
    });
    this.$nextTick(function () {
      const audio = document.getElementById("myAudio");
      this.value = audio.volume;
    });
  },
};
</script>

<style scoped>
.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}
.liebiao {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px 5px;
}
.jiehsoa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sndjak {
  width: 70px;
  height: 70px;
}
.btb {
  width: 100%;
  height: 160px;
  background-color: aqua;
}
.bofangqi {
  background-color: rgb(250, 240, 240);
  height: 60px;
  width: 100%;
  position: fixed; /* 吸底定位 */
  bottom: 50px; /* 距离底部为 0 */
  display: flex;
  flex-direction: column;
}
.bofangqisdadas {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.touxiang {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.imgggg {
  width: 50px;
  height: 50px;
}
.sdawdsa {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.hkjasdhjas {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  font-size: 30px;
  /* width: 100px; */
}
.jdt {
  height: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.yliangasa {
  position: relative;
}
.yliang {
  position: absolute;
  width: 150px;
  left: -60px;
  top: -100px;
  /* background-color: #ee0a24; */
  transform: rotate(-90deg);
}
</style>